<template>
  <div class="preview">
    <div class="img">
      <!-- <img src="~@/assets/1.png" alt="锁螺丝" /> -->
      <img :src="config.img" alt="锁螺丝" />
      <template v-for="(item, index) in states">
        <div class="status-item" :class="item.result ? 'ok' : 'ng'" 
         :key="item.id"
        v-if="config.locations[index]"
        :style="{ left: config.locations[index].left, top: config.locations[index].top }">
        <div class="tip" :class="[{ tip2: config.id == 2 }, config.locations[index].tipLoc]">
          <p >{{ item.name }}</p>
          <template v-if="config.id == 1">
            <p :class="item.torsion < item.torsionLimt ? 'ok' : 'ng'">扭矩：{{ item.torsion }}牛*米</p>
            <p :class="item.lap < item.lapLimt ? 'ok' : 'ng'">圈数：{{ item.lap }}圈</p>
            <p :class="item.screwloose ? 'ok' : 'ng'">滑牙：{{ item.screwloose ? "OK" : "NG" }}</p>
            <p :class="item.float ? 'ok' : 'ng'">浮高：{{ item.float ? "OK" : "NG" }}</p>
          </template>
          <template v-else>
            <p :class="item.result ? 'ok' : 'ng'">功能:{{ item.result ? "OK" : "NG" }}</p>
          </template>
        </div>
      </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "Preview",
  props: {
    states: {
      type: Array,
      default: () => ([])
    },
    config: {
      type: Object,
      default: () => ({})
    }
  },
  filters: {
    filterAttr() {

    }
  }
}
</script>

<style lang="less" scoped>
.preview {
  max-width: 70%;
  margin: 0 auto;

  .img {
    width: 100%;
    position: relative;

    img {
      width: 100%;
    }
  }


  .ok {
    color: lawngreen;
  }

  .ng {
    color: firebrick;
  }

  .status-item {
    position: absolute;
    top: 7.5%;
    left: 15.1%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    border: 1px solid #000;
    &.ok {
      background-color: rgba(0, 255, 0, 0.5);
    }
    &.ng {
      background-color: rgba(255, 0, 0, 0.5);
    }
    .tip {
      position: absolute;
      width: max-content;
      padding: 0 8px;
      &.top {
        bottom: 76px;
        left: 0;
      }

      &.bottom {
        top: 76px;
        right: 0;
      }

      &.left {
        top: 0;
        right: 76px;
      }

      &.right {
        top: 0;
        left: 86px;
      }
      &.tip2 {
        &.bottom {
          top: 36px;
          right: -18px;
        }
      }
      p {
        font-size: 12px;
        margin: 0;
        padding: 0;
      }
    }
  }
}
</style>